<template>
  <div class="classDetail">
    <div class="player">
      <!-- 视频播放器 -->
      <gl-play-video class="video" width="23.44rem" height="12.5rem" :video="currVideo" :src="currVideo.video_url"
                     :poster="currVideo.bigimg" :video-stop="videoStop" autoplay :cid="cid"></gl-play-video>
    </div>
    <!-- tab切换标签页 -->
    <div class="tabs">
      <van-tabs v-model="active" title-active-color="#3071f4" color="#3071f4">
        <!-- 课程目录 -->
        <van-tab :title="isWx ? '目录' : '课程目录'">
          <van-list v-model="resLoading"
                    class="resource-list ul ova"
                    :class="'' + (isWx && showHeader)"
                    :finished="resourceList.length >= resTotal"
                    finished-text="没有更多了"
                    @load="resCurr++"
                    v-if="resourceList && resourceList.length">
            <div class="li clearfix" v-for="(item, ind) in resourceList" :key="ind"
                 @click="getVideoDetails(item,ind)">
              <div class="big-img fl ovh vam por">
                <img :src="item.bigimg" class="inner w100 h100">
                <vip-tip v-show="!userInfo.is_vip" :is-vip="!item.is_free" class="poa t0 r0"></vip-tip>
              </div>
              <div class="content flex-col jca">
                <div class="content_top" :class="{checked:checkIndex === ind}">
                  {{item.name}}
                </div>
                <div class="content_bottom flex jcb">
                  <div class="main_teacher" :class="{checked:checkIndex === ind}">
                    主讲老师：{{item.teacher_name}}
                  </div>
                  <div class="playNum" :class="{checked:checkIndex === ind}">
                    {{item.record_count}}次播放
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-tab>
        <!-- 课程介绍 -->
        <van-tab :title="isWx ? '介绍' : '课程介绍'" class="course-remark ova" :class="'' + (isWx && showHeader)">
          <!-- 收藏 -->
          <div class="book por" :class="'' + isWx">
            <div class="edition">{{classDetailInfo.documentTitle}}</div>
            <div class="content jcb por" v-if="!isWx">
              <div class="rate">
                <div class="teacher">主讲老师：<span class="teacherColor">
                {{classDetailInfo.teacher_name}}</span></div>
                <div class="mark flex">综合评分：
                  <!-- <img v-for="(item,index) in 5" :key="index" :src="mark"/> -->
                  <star :size="36" :score="Number(classDetailInfo.score)"></star>
                </div>
                <div class="peopleNum">学习人数：<span class="peopleColor">{{classDetailInfo.hits}}人</span></div>
              </div>
              <div class="collect tac bsb poa b0 r0" @click="collectEvent"
                   :class="{collected: classDetailInfo.is_collection}">
                <img class="vam"
                     :src="imgPath + (classDetailInfo.is_collection ? 'ico_collect_sel.png' : 'ico_collect_nor.png')">
                <div>收藏</div>
              </div>
            </div>
            <div class="content-wx flex jcb aic" v-else>
              <div class="content-left">
                <div class="dib vam res-count">{{classDetailInfo.resources_count}}课时</div>
                <div class="dib vam">{{(classDetailInfo.hits / 10000).toFixed(1)}}万次播放</div>
              </div>
              <div class="content-right" :class="'' + !!classDetailInfo.is_collection" @click="collectEvent">
                <img class="vat right-ico" :src="starIco[+classDetailInfo.is_collection]">
                <span>{{classDetailInfo.is_collection ? '已收藏' : '收藏'}}</span>
              </div>
            </div>
          </div>
          <!-- 课程简介 -->
          <div class="classProduce">
            <div class="produce">课程简介</div>
            <div class="lineOne">{{classDetailInfo.remark}}</div>
          </div>
          <!-- 老师介绍 -->
          <div class="teacherProduce">
            <div class="produce">老师介绍</div>
            <van-swipe class="ul" :loop="false" :show-indicators="false" v-if="!isWx">
              <van-swipe-item v-for="(teacher, ind) in teacherInfo" :key="ind" class="clearfix">
                <div class="swipe-item bsb w100">
                  <div class="li">
                    <div class="teacherLogo flex">
                      <div class="logo ovh">
                        <img :src="teacher.teacher_bigimg" alt="" class="img w100 h100 vat">
                      </div>
                      <div class="name">{{teacher.teacher_name}}</div>
                      <div class="teacherGrade">{{teacher.zhicheng}}</div>
                    </div>
                    <div class="teacherContent">{{teacher.content}}</div>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
            <div class="ul is-wx" v-else>
              <div v-for="(teacher, ind) in teacherInfo" :key="ind" class="clearfix">
                <div class="swipe-item bsb w100">
                  <div class="li">
                    <div class="teacherLogo flex">
                      <div class="logo ovh">
                        <img :src="teacher.teacher_bigimg" alt="" class="img w100 h100 vat">
                      </div>
                      <div class="name">{{teacher.teacher_name}}</div>
                      <div class="teacherGrade">{{teacher.zhicheng}}</div>
                    </div>
                    <div class="teacherContent">{{teacher.content}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 温馨提示 -->
          <detail-tip v-show="isWx" :tips-list="tipsList"></detail-tip>
        </van-tab>
        <!-- 学员评价 -->
        <van-tab v-if="!isWx" title="学员评价">
          <div class="studentCritic">
            <div class="myCritic" @click="showMyCritic = !classDetailInfo.myscore">
              <span class="critic">我的评价：</span>
              <van-rate class="vam dib" :value="classDetailInfo.myscore * 1" readonly icon="sel-star"
                        void-icon="uns-star"/>
              <span :class="classDetailInfo.myscore ? 'have-score' : 'noMark'">
                {{classDetailInfo.myscore || '未评'}}分
              </span>
            </div>
            <!-- 评价列表 -->
            <div class="criticImg tac clearfix">
              <van-list v-model="commentLoading"
                        class="comment-list ova"
                        :finished="commentList.length >= comTotal"
                        finished-text="没有更多了"
                        @load="comCurr++"
                        v-if="commentList && commentList.length">
                <div class="comment-item por" v-for="(item, ind) in commentList" :key="ind">
                  <img :src="item.icon" @error="item.icon = defaultIcon"
                       class="poa avatar vat">
                  <div class="inner tal">
                    <div class="name-score">
                      <span class="name">{{item.realname || item.username}}</span>
                      <star :size="36" :score="1 * item.score" class="dib vam"></star>
                    </div>
                    <div class="comment-content">{{item.content}}</div>
                    <div class="create-time">{{item.create_time}}</div>
                  </div>
                </div>
              </van-list>
              <div class="no-comment" v-else>
                <img :src="imgPath + 'image_evaluate_no.png'" alt="">
                <div class="criticRemark">还没有评价噢，快来抢沙发吧</div>
              </div>
            </div>
            <!-- 底部评价弹框 -->
            <div class="criticBox">
              <van-popup v-model="showMyCritic" position="bottom">
                <div class="title tac">我的评价
                  <span class="closeBtn" @click="showMyCritic = false">
                  <img src="../../../static/images/classDetail/pop_ico_close.png" alt="">
                </span>
                </div>
                <!-- 评价星星 -->
                <div class="starNum tac">
                  <!-- <img class="star" v-for="(item,index) in 5" :key="index" :src="mark"/> -->
                  <van-rate class="big" v-model="comment.score" icon="sel-star" void-icon="uns-star"/>
                </div>
                <!-- 评价内容区 -->
                <div class="criticContent">
                  <textarea class="criticText" cols="50" rows="6" maxlength="300" placeholder="写出我的看法"
                            v-model="comment.content"></textarea>
                  <div class="number tar">{{comment.content.length}}/300</div>
                </div>
                <!-- 提交按钮 -->
                <div class="submitBtn tac" @click="submitEvent">提交评价</div>
              </van-popup>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import star from './component/star';
  import { mapGetters } from 'vuex';


  export default {

    props: {
      showHeader: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        imgPath: './static/images/classDetail/',
        active: 0,
        showMyCritic: false,
        isSubmitEvent: false,
        starValue: 0,
        criticValue: [],
        phone: '18925187565',
        tipsList: [
          '如有其它疑问，可拨打客服电话：{{phone}}，或添加客服微信：{{phone}}，进行咨询。',
          '查看更多精品课程，请扫描下方二维码关注我们。'
        ],

        starIco: [
          require('../../images/star_03.png'),
          require('../../images/star_07.png')
        ],

        comment: { // 评价
          score: 5,
          content: ''
        },

        teaCurr: 1,
        teaLimits: 10,
        teaTotal: 0,
        teacherInfo: [],

        comCurr: 1,
        comLimits: 10,
        comTotal: 0,
        commentList: [],
        commentLoading: true,

        resCurr: 1,
        resLimits: 10,
        resTotal: 0,
        resourceList: [],
        resLoading: true,
        currVideo: {},
        currVideoId: '',
        videoStop: false,

        cid: '',
        classDetailInfo: {},
        checkIndex: 0
      };
    },
    components: {
      star
    },
    computed: {
      ...mapGetters(['productInfo', 'userInfo', 'defaultIcon', 'isWx'])
    },
    watch: {
      showMyCritic(val) {
        if (val) {
          this.comment = {
            score: 5,
            content: ''
          };
        }
      },
      comCurr(val) {
        this.getCommentList();
      },
      resCurr(val) {
        this.getCourseContent();
      }
    },
    created() {
      this.cid = this.$route.params.cid;
      this.util.setWxConfig(['updateAppMessageShareData', 'updateTimelineShareData']).catch(console.log);
      this.util.login('', this.$route.fullPath).then(r => {
        this.getCourseInfo();
        this.getCourseContent();
      }).catch(console.log);
      this.getTeacherInfo();
      this.getCommentList();
    },
    methods: {
      //请求课程目录数据
      getCourseContent(first) {
        if (first === true) {
          this.resourceList = [];
          this.resTotal = 0;
          return this.resCurr = 1;
        }
        this.http.$post('api/resource.resources/get_resources_list', {
          product_id: this.productInfo.product_id,
          uid: this.userInfo.uid,
          course_id: this.cid,
          curr: this.resCurr,
          limits: this.resLimits
        }).then((res) => {
          this.resourceList.push(...res.list);
          this.resTotal = res.total;
          if (this.resCurr === 1) {
            this.currVideo = res.list[0] || {};
            this.getVideoDetails();
          }
          this.resLoading = false;
          // console.log("CourseContent:", res);
        });
      },
      //请求课程详情数据
      getCourseInfo() {
        this.http.$post('api/resource.course/get_course_detail', {
          course_id: this.cid,
          uid: this.userInfo.uid,
          product_id: this.productInfo.product_id
        }).then((res) => {
          if (res.format_id === 2) {
            return this.$router.replace(/audiodetail/ + this.cid);
          }
          let title = res.name.split('：');
          document.title = title[1] || title[0];
          res.documentTitle = document.title;
          this.classDetailInfo = res;
          this.classDetailInfo.status === 2 && this.$dialog.alert({
            message: '本课程还在录制中，先看看别的课程吧',
            confirmButtonText: '我知道了'
          });
          let obj = {
            title: res.name,
            desc: `我正在学习${res.name}，老师讲得很好，通俗易懂，裂墙推荐！`,
            imgUrl: res.bigimg,
            link: this.util.makeShareLink(),
            success: () => {
              // 设置成功
              // this.$toast.success('分享成功');
            }
          };
          wx.ready(() => {
            wx.updateAppMessageShareData(obj);
            wx.updateTimelineShareData(obj);
          });
          // console.log('res', res);
        }).catch(this.$err);
      },
      //获取老师信息
      getTeacherInfo() {
        this.http.$post('api/resource.teacher/get_course_teacher', {
          curr: this.teaCurr,
          limits: this.teaLimits,
          course_id: this.cid
        }).then((res) => {
          this.teacherInfo = res.list;
        }).catch(this.$err);
      },
      // 收藏状态切换
      collectEvent() {
        if (!this.userInfo.uid) {
          this.util.login().then(this.collectEvent).catch(this.$err);
          return;
        }
        this.http.$post('api/user/save_course_collection', {
          uid: this.userInfo.uid,
          course_id: this.cid,
          ...this.productInfo
        }).then(res => {
          this.classDetailInfo.is_collection = res.status === 1;
        }).catch(this.$err);
      },
      //提交评价按钮
      submitEvent() {
        if (!this.userInfo.uid) {
          this.util.login().then(this.submitEvent).catch(this.$err);
          return;
        }
        if (this.isSubmitEvent) return;
        this.isSubmitEvent = true;
        this.http.$post('api/resource.course/add_course_comment', {
          uid: this.userInfo.uid,
          course_id: this.cid,
          ...this.comment,
          ...this.productInfo
        }).then((res) => {
          this.showMyCritic = false;
          this.isSubmitEvent = false;
          this.commentList = [];
          this.classDetailInfo.myscore = this.comment.score;
          this.getCommentList(this.comCurr !== 1);
          this.$toast.success(res);
        }).catch(this.$err);
      },
      // 获取评价列表
      getCommentList(first) {
        if (first === true) {
          this.commentList = [];
          this.comTotal = 0;
          return this.comCurr = 1;
        }
        this.http.$post('api/resource.course/get_course_comment_list', {
          course_id: this.cid,
          curr: this.comCurr,
          limits: this.comLimits
        }).then(res => {
          this.commentList.push(...res.list);
          this.comTotal = res.total;
          this.commentLoading = false;
        }).catch(err => {
          if (err.code * 1 === 10003) {
            this.commentLoading = false;
          } else {
            this.$err(err);
          }
        });
      },
      // 选中视频
      getVideoDetails(item = this.currVideo, ind = 0) {
        if (this.classDetailInfo.status === 2) {
          return this.$dialog.alert({
            message: '本课程还在录制中，先看看别的课程吧',
            confirmButtonText: '我知道了'
          });
        }
        if (item.id === this.currVideoId) return;
        this.stop = this.util.goToPlay(item, () => {
          //可以播放的话再改变样式
          this.checkIndex = ind;
          this.http.$post('api/resource.resources/get_resource_details', {
            resources_id: item.id,
            uid: this.userInfo.uid,
            product_id: this.productInfo.product_id,
            prefix: 'aiapp'
          }).then(res => {
            this.currVideo = res;
            this.currVideoId = res.id;
          }).catch(err => {
            this.$err(err);
          });
        }, '', () => {
          // 弹出弹框前
          this.videoStop = true;
        }, () => {
          // 弹框关闭后
          this.videoStop = false;
        });
      }
    },
    beforeDestroy() {
      this.stop && (this.stop.show = false);
    }
  };
</script>
<style lang="less" scoped>
  .classDetail {
    background-color: #fff;
    .player {
      .video {
        background-color: #1d4d88;
      }
    }
    .tabs {
      .resource-list {
        height: calc(100vh - 18rem);
        padding: 1rem;
        &.true {
          height: calc(100vh - 21rem);
        }
        .li {
          margin-bottom: 1rem;
          padding-bottom: 1rem;
          border-bottom: .03rem solid #e8e8e8;
        }
        .big-img {
          margin-right: .75rem;
          width: 7.75rem;
          height: 4.38rem;
          border-radius: .38rem;
        }
        .content {
          height: 4.38rem;
          line-height: 1.13rem;
          font-size: .75rem;
          color: #b5b5b5;
        }
        .content_top {
          font-size: .94rem;
          color: #333;
        }
        .main_teacher {
          color: #999;
        }
      }
      .book {
        padding: 1.2rem 0;
        font-size: 0.66rem;
        &.true {
          border-bottom-width: .38rem;
          &:after {
            content: '';
            position: absolute;
            bottom: -.38rem;
            left: -1rem;
            width: 100vw;
            height: .38rem;
            background-color: #e8e8e8;
          }
        }
        .edition {
          margin-bottom: 1.58rem;
          font-size: 1.13rem;
          font-weight: 600;
          line-height: 1.5rem;
          color: #222;
        }
        .content {
          color: #b5b5b5;
          .rate {
            .teacher {
              .teacherColor {
                color: #000
              }
            }
            .mark {
              margin: 0.78rem 0;
              line-height: 0.68rem;
              img {
                width: 0.7rem;
              }
            }
            .peopleNum {
              .peopleColor {
                color: #000
              }
            }
          }
          .collect {
            width: 2.69rem;
            height: 3.25rem;
            border: .05rem solid #eaedf2;
            padding: .63rem 0;
            background-color: #fafcff;
            border-radius: .19rem;
            font-size: .75rem;
            color: #9fa6bb;
            > :first-child {
              width: 1.06rem;
              height: 0.94rem;
            }
          }
          .collected {
            color: #fa7658;
            border: .05rem solid #fa7658;
          }
        }

        .content-wx {
          line-height: 1;
          font-size: .69rem;
          color: #c3c8c9;
          .res-count {
            margin-right: .5rem;
            padding-right: .5rem;
            border-right: .03rem solid #c3c8c9;
            color: #959899;
          }
          .content-right {
            color: #959899;
            font-size: .75rem;
            &.true {
              color: #ffbd23;
            }
          }
          .right-ico {
            margin-right: .31rem;
            width: .78rem;
            height: .78rem;
          }
        }
      }
      .classProduce {
        padding: 0 0 1.2rem;
        .produce {
          font-weight: bold
        }
        .lineOne, .lineTwo {
          font-size: 0.66rem;
          color: #b5b5b5
        }
        .lineOne {
          margin: 1rem 0 0;
        }
        .lineTwo {
          border-bottom: 1px solid #eee;
          padding-bottom: 1.28rem;
        }
      }
      .teacherProduce {
        .produce {
          margin: 0 0 .94rem 0;
          font-weight: bold
        }
        .teacherSwipe {
        }
        .ul {
          overflow: unset;
          &.is-wx {
            > :not(:last-child) {
              margin-bottom: .94rem;
            }
          }
          .swipe-item {
            padding: 0 .25rem;
          }
          .li {
            padding: 1rem;
            background-color: #f0f2f6;
            border-radius: .75rem;
          }
          .teacherLogo {
            margin-bottom: .94rem;
            line-height: 2.5rem;
          }
          .logo {
            margin-right: .78rem;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
          }
          .name {
            margin-right: 1.25rem;
            font-size: .88rem;
            color: #333;
          }
          .teacherGrade {
            font-size: .75rem;
            color: #999;
          }
          .teacherContent {
            font-size: .75rem;
            line-height: 1rem;
            color: #666;
          }
        }
      }
      .studentCritic {
        .van-rate__item {
          padding: 0 .25rem;
        }
        [class*=van-icon-] {
          width: 1rem;
          height: 1rem;
        }
        .van-icon-uns-star {
          background: url(../../../static/images/classDetail/detail_star03.png) no-repeat center center / 100%;
        }
        .van-icon-sel-star {
          background: url(../../../static/images/classDetail/detail_star01.png) no-repeat center center / 100%;
        }
        .big {
          .van-rate__item {
            padding: 0 .36rem;
          }
          [class*=van-icon-] {
            width: 2.16rem;
            height: 2.16rem;
          }
        }
        .myCritic {
          background-color: #f6f6f6;
          height: 2.66rem;
          line-height: 2.66rem;
          margin: 0.72rem 0.64rem 0;
          border-radius: 0.5rem;
          padding-left: 1.25rem;
          span {
            display: inline;
          }
          .star {
            margin-left: 0.5rem;
            img {
              width: 1rem;
            }
          }
          .noMark {
            margin-left: .66rem;
            color: #ffc000;
            font-size: .75rem;
          }
          .have-score {
            margin-left: .66rem;
            color: #fcb040;
            font-size: 1rem;
          }
        }
        .criticImg {
          .no-comment {
            margin-top: 3.7rem;
          }
          img {
            width: 9.34rem;
          }
          .criticRemark {
            color: #9fa6bb;
            margin-top: 1.25rem;
          }
        }
        .comment-list {
          height: calc(100vh - 17rem);
          margin-top: .75rem;
          padding: 0 .96rem 1rem 3.28rem;
          .comment-item {
            margin-bottom: .75rem;
            padding-bottom: .75rem;
            color: #ccc;
            font-size: .75rem;
            border-bottom: .03rem solid #eee;
            .avatar {
              top: 0;
              left: -2.53rem;
              width: 1.75rem;
              height: 1.75rem;
              border-radius: 50%;
            }
            .name-score {
              margin-bottom: .38rem;
              line-height: 1.75rem;
              .name {
                margin-right: .75rem;
                color: #989898;
                + .vam {
                  transform: translateY(-20%);
                }
              }
            }
            .comment-content {
              font-size: .88rem;
              line-height: 1.25rem;
              color: #444;
            }
          }
        }
      }
      .criticBox {
        .title {
          position: relative;
          height: 3.02rem;
          line-height: 3.02rem;
          color: #6f6f6f;
          font-size: 1.06rem;
          border-bottom: 1px solid #ccc;
          .closeBtn {
            width: 1.06rem;
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 0.88rem;
            img {
              width: 100%;
            }
          }
        }
        .starNum {
          margin: 1.6rem 0;
          img {
            width: 2.16rem;
            margin-right: 0.66rem;
          }
        }
        .criticContent {
          padding: 0 1.2rem;
          .criticText {
            box-sizing: border-box;
            width: 100%;
            border: 1px solid #dadada;
            padding: 0.64rem;
          }
          .number {
            color: #ccc
          }
        }
        .submitBtn {
          height: 2.72rem;
          line-height: 2.72rem;
          background-color: #2167f3;
          color: #fff;
          margin: 1.8rem 1.22rem 1.22rem;
          border-radius: 0.3rem;
        }
      }
    }
  }

  .course-remark {
    overflow-x: hidden;
    height: calc(100vh - 16rem);
    padding: 0 1rem 1rem;
    &.true {
      height: calc(100vh - 19rem);
    }
    > :not(:last-child) {
      margin-bottom: 1.25rem;
      padding-bottom: 1.25rem;
      border-bottom: #e8e8e8 .03rem solid;
    }
  }

  .checked {
    color: #1295fc !important
  }
</style>
